<template>
  <div>
    <content_top title="出纳期末结账" nextMonth="1"></content_top>

    <div class="g_box">
      <div class="g_head">
        <h3>出纳期末结账</h3>
      </div>
      <div class="g_box_last">
        <div class="last_icon">
          <Icon type="ios-information-circle-outline" size='100' :color="err_msg==''?'#20b2aa':'#ff0000'"  />
        </div>
        <div class="last_date">
          <span>当前<span style="color:red;">财务出纳</span>结账期为：</span>
          <DatePicker :value="date_month" type="month" placeholder="选择月份" style="width: 200px;" @on-change="month_change" ></DatePicker>
        </div>
        <p class="last_confirm">出纳期结账后系统将不能新增修改该月份<span style="color:red;">出纳板块</span>数据，请谨慎操作。</p>
        <div class="last_btn">
			<p style="color:red;font-size: 13px;">{{err_msg}}</p>
			<div class="btn_chuna"><Button @click="checkout">出纳期结账</Button></div>
        </div>
        </Form>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "balance_last",
  data() {
    let self = this;
		return {
			date_month: new Date().Format('yyyy-MM'),
			err_msg:''
		};
	},
	components: {
		
	},
	created() {},
	computed: {},
	methods: {
		month_change(date) {
		  this.date_month = date;
		},
		checkout() {
			var self = this;

			var postdata = {
				date_month:this.date_month
			};
			Whttp.load("Chuna/Checkout/balance", postdata, function(result) {
				self.err_msg = '';
				alert('结账成功');
			},function(result){
				self.err_msg = result.message;
			});
		},
	}
};
</script>
<style scoped>
.g_box_last {
  width: 600px;
  padding: 20px;
  margin: 20px auto 100px;
  font-size: 16px;
}
.last_icon {
  margin: 40px 0;
  text-align: center;
}
.last_confirm {
  margin: 30px 0 60px;
}
.last_btn {
  text-align: center;
}
.last_btn button {
  width: 350px;
  color: #fff;
  font-size: 18px;
  background-color: #1abc9c;
}
.btn_chuna {
  margin-top: 30px;
}
</style>